<style lang="scss" scoped>
    #clinicalTrial{
        background:#fff;
        padding:0 10px;
        .radio-content{
            padding:10px 0;
        }
        .table-content{
            padding:20px 0;
        }
        .g-card{
            min-height:300px;
            padding:10px;
            background:#fff;
            &.g-card-null{
                margin-left:-10px;
            }
        }
    }
</style>
<template>
    <div id="clinicalTrial" class="content-mask">
        <div class="g-card" v-if="drugId">
            <div class="radio-content">
                <el-radio-group v-model="clt" size="small" @change="getValue">
                    <el-radio-button label="0" >世界临床试验</el-radio-button>
                    <el-radio-button label="1">中国临床试验</el-radio-button>
                </el-radio-group>
            </div>
            <div class="table-content">
                <el-table v-show="clt == 0" v-loading="loadingWorld" element-loading-text="数据加载中，请稍后" :data='worldInfo' border style="width: 100%" @sort-change="worldSortChange">
                    <el-table-column align="center" label="NCT号">
                        <template slot-scope="scope">
                            <a @click="goNct(scope.row.id)" href="javascript:void(0)">{{scope.row.nctId}}</a>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="实验题目" prop='title'>
                        <template slot-scope="scope">
                            <el-popover  placement="top" width="300">
                                <p>{{ scope.row.title }}</p>
                                <div slot="reference" class="name-wrapper">
                                    <el-tag style="cursor:pointer;" size="medium">查看</el-tag>
                                </div>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="临床阶段" prop='phase' sortable></el-table-column>
                    <el-table-column align="center" label="招募状态" prop='recruitment' sortable></el-table-column>
                    <!-- <el-table-column align="center" label="适应症" prop='indication'></el-table-column> -->
                    <el-table-column align="center" label="申办单位" prop='sponsor'></el-table-column>
                    <el-table-column align="center" label="干预" prop='therapy'>
                        <template slot-scope="scope">
                            <el-popover placement="top" width="300">
                                <p>{{ scope.row.therapy}}</p>
                                <div slot="reference" class="name-wrapper">
                                    <el-tag style="cursor:pointer;" size="medium">查看</el-tag>
                                </div>
                            </el-popover>
                        </template>
                    </el-table-column>
                </el-table>
                <el-table v-show="clt == 1" v-loading="loadingChina" element-loading-text="数据加载中，请稍后" :data='chinaInfo' border style="width: 100%" @sort-change="chinaSortChange">
                    <el-table-column align="center" label="登记号">
                        <template slot-scope="scope">
                            <a @click="goCtr(scope.row.ctrId)" href="javascript:void(0)">{{scope.row.ctrId}}</a>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="实验题目" prop='scienceTitle'></el-table-column>
                    <el-table-column align="center" label="药物名称" prop='medicineName'></el-table-column>
                    <el-table-column align="center" label="适应症" prop='indication'></el-table-column>
                    <el-table-column align="center" label="试验状态" prop='status' sortable></el-table-column>
                    <el-table-column align="center" label="试验分期" prop='periodization'></el-table-column>
                    <el-table-column align="center" label="申办单位" prop='sponsor'></el-table-column>
                    <el-table-column align="center" label="实验机构" prop='contactsAdd'></el-table-column>
                    <el-table-column align="center" label="登记时间" prop='time' sortable></el-table-column>
                </el-table>
            </div>
        </div>
        <div class="g-card g-card-null" v-else>
            请先选择药物
        </div>
        <el-dialog :visible.sync="isNctShow">
            <span slot="title" class="dialog-header">详情</span>
            <div class="dialog-cont" style="max-height:380px;overflow:auto;">
                <nct v-if="isNctShow" :id="nctId"></nct>
            </div>
        </el-dialog>
        <el-dialog :visible.sync="isCtrShow">
            <span slot="title" class="dialog-header">详情</span>
            <div class="dialog-cont" style="max-height:380px;overflow:auto;">
                <ctr v-if="isCtrShow" :id="ctrId"></ctr>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import nct from '@/views/medicine/nct.vue';
import ctr from '@/views/medicine/ctr.vue';
import {medicine} from 'api/index.js';
export default {
    name: 'clinicalTrial',//临床试验
    data(){
        return{
            ctrId:"",
            nctId:"",
            clt:"0",
            drugId:"",
            loadingWorld:false,
            loadingChina:false,
            worldInfo:[],
            chinaInfo:[],
            worldOrderStatus:'',
            worldOrderTime:'',
            chinaOrderStatus:'',
            chinaOrderTime:'',
            isNctShow:false, //是否显示国际临床证据详情
            isCtrShow:false, //是否显示中国临床证据详情
        }
    },
    components:{
        nct,
        ctr
    },
    methods:{
        getValue(){
            console.log(this.clt);
        },
        goNct(id){
            this.nctId = id;
            this.isNctShow = true;
            //this.$router.push("/nct?nctId="+id);
        },
        goCtr(id){
            this.ctrId = id;
            this.isCtrShow = true;
            //this.$router.push("/ctr?ctrId="+id);
        },
        //中国临床试验
        getChinaInfo(){
            this.loadingChina=true;
            let obj={
                id:this.drugId,
                orderStatus:this.chinaOrderStatus,
                orderTime:this.chinaOrderTime
            }
            medicine.getChclinsByDrugId(obj).then(data=>{
                if(data.status==200){
                    this.loadingChina=false;                  
                    this.chinaInfo=data.data.chclins;
                    this.chinaInfo.forEach(item=>{
                        item.time=this.formatDate(item.time)
                    })
                }
                else{
                    this.loadingChina=true;
                    this.$message.error("中国临床试验列表未加载成功");
                }
            }).catch(error=>{
                this.loadingChina=true;
                this.$message.error("中国临床试验列表未加载成功");
            })
        },
         //世界临床试验
        getWorldInfo(){
            this.loadingWorld=true;
            let obj={
                id:this.drugId,
                orderStatus:this.worldOrderStatus,
                orderTime:this.worldOrderTime
            }
            medicine.getClinicaltrailsByDrugId(obj).then(data=>{
                if(data.status==200){
                    this.loadingWorld=false;
                    this.worldInfo=data.data.clinicaltrails;
                }else{
                    this.loadingWorld=true;
                    this.$message.error("世界临床试验列表未加载成功");
                }
            }).catch(error=>{
                this.loadingWorld=true;
                this.$message.error("世界临床试验列表未加载成功");
            })

        },
        worldSortChange({column, prop, order}){
            if(prop=='phase'){
                if(order=='ascending'){
                    this.worldOrderStatus='asc'
                }
                else if(order=='descending'){
                    this.worldOrderStatus='desc'
                }else{
                    this.worldOrderStatus=''
                }
            }
            if(prop=='recruitment'){
                if(order=='ascending'){
                    this.worldOrderTime='asc'
                }
                else if(order=='descending'){
                    this.worldOrderTime='desc'
                }else{
                    this.worldOrderTime=''
                }
            }
            this.getWorldInfo()
        },
        chinaSortChange({column, prop, order}){
            if(prop=='periodization'){
                if(order=='ascending'){
                    this.chinaOrderStatus='asc'
                }
                else if(order=='descending'){
                    this.chinaOrderStatus='desc'
                }else{
                    this.chinaOrderStatus=''
                }
            }
            if(prop=='status'){
                if(order=='ascending'){
                    this.chinaOrderTime='asc'
                }
                else if(order=='descending'){
                    this.chinaOrderTime='desc'
                }else{
                    this.chinaOrderTime=''
                }
            }
            this.getChinaInfo()
        },
        formatDate(date) {
            var youWant;
            if (date && date != "") {
                var d = new Date(date);
                var month, dates;
                if (d.getMonth() + 1 < 10) {
                month = "-0" + (d.getMonth() + 1);
                } else {
                month = "-" + (d.getMonth() + 1);
                }
                if (d.getDate() < 10) {
                dates = "-0" + d.getDate();
                } else {
                dates = "-" + d.getDate();
                }
                youWant = d.getFullYear() + month + dates;
            } else {
                youWant = null;
            }
            return youWant;
        }
    },
    mounted(){
        this.drugId = this.$store.state.searchId ? this.$store.state.searchId : '';
        if(this.drugId){
            this.getChinaInfo();
            this.getWorldInfo();
        }
    },
    watch:{
        "$store.state.searchId":function(){
            if(this.$store.state.searchId && this.drugId != this.$store.state.searchId){
                this.drugId = this.$store.state.searchId;
                this.getChinaInfo();
                this.getWorldInfo();
            }
        }
    }
}
</script>